<template>
  <div class="hotel">
    <!-- 酒店筛选 -->
    <search @searchCity="searchCity" />
    <!-- 酒店区域 -->
    <Area @cityId="gethotel" :hotelLocation="hotelLocation" />
    <!-- 酒店搜索 -->
    <hotelSearch :hotelData="hotelData" @hotelInfo="hotelInfo" />
    <!-- 酒店列表 -->
    <hotelList :hotelComment="hotelComment" />
    <!-- 分页组件 -->
    <!-- <div>分页组件</div> -->
    <p
      class="noresult"
      v-if="hotelComment.data && hotelComment.data.length == 0"
    >
      暂无符合条件的酒店
    </p>
    <div class="fenye">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        prev-text="<上一页"
        next-text="下一页>"
        @prev-click="previous"
        @next-click="next"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import search from "@/components/hotel/search";
import Area from "@/components/hotel/Area";
import hotelSearch from "@/components/hotel/hotelSearch";
import hotelList from "@/components/hotel/hotelList";
import { citiesList } from "@/utils/hotel";
import { hotelType_List } from "@/utils/hotel";
export default {
  data() {
    return {
      travelList: [], //旅游景点
      hotelData: {
        levels: [], // 酒店等级
        types: [], // 酒店类型
        assets: [], // 酒店设施
        brands: [], // 酒店品牌
      },
      //城市的酒店列表
      hotelComment: [],
      //城市id
      cityId: "",
      //酒店位置
      hotelLocation: [],
      //酒店条数
      total: 100,
      //下一页的条数
      nextStart: 10,
      //根据参数的变化请求回来的酒店列表条数
      nextStart1: 10,
      //搜索城市的id
      searchId: 0,
      //用于筛选的请求路径
      parameter: "",
    };
  },
  components: {
    search,
    Area,
    hotelSearch,
    hotelList,
  },
  watch: {
    $route() {
      this.cityId = this.$route.query.city;
    },
  },
  async mounted() {
    let res = await hotelType_List();
    console.log(res);
    this.hotelData.levels = res.data.data.levels;
    this.hotelData.types = res.data.data.types;
    this.hotelData.assets = res.data.data.assets;
    this.hotelData.brands = res.data.data.brands;
    this.cityId = this.$route.query.city;
    // let result = await hotelDetail({ city: this.$route.query.city });
    // console.log(result);
    //进入页面发送请求拿到当地的酒店数据
    this.$axios({
      url: `/hotels?city=${this.$route.query.city}`,
    }).then((result) => {
      console.log(result);
      this.hotelComment = result.data;
      this.total = this.hotelComment.total;
      this.nextStart = res.data.nextStart;
    });
  },
  methods: {
    //接受子组件过来的参数
    searchCity(value) {
      console.log(value);
      this.$store.commit("hotel/setcityScenic", value.scenics);
      this.$axios({
        url: `/hotels?city=${value.id}`,
      }).then((res) => {
        console.log(res);
        this.hotelComment = res.data;
        this.hotelLocation = res.data.data;
        console.log(this.hotelLocation);
        this.total = this.hotelComment.total;
        this.nextStart = res.data.nextStart;
      });
      this.searchId = value.id;
    },
    hotelInfo(value) {
      console.log(value);
      console.log(this.cityId);
      //设置请求参数(请求参数不同,根据请求参数去改变页面数据列表)
      let parameter = `city=${this.cityId}`;
      //遍历value对象拿出里面的数组
      for (let key in value) {
        console.log(key);
        console.log(value[key]);
        if (key == "price_lt") {
          //如果用户筛选酒店价格,就将酒店价格拼接上去
          parameter += `&${key}=${value[key]}`;
        } else if (value[key].length !== 0) {
          value[key].forEach((v) => {
            console.log(v);
            parameter += `&${key}=${v}`;
          });
        }
        
        // console.log(parameter);
      }
      this.$axios({
        url: `/hotels?${parameter}`,
      }).then((res) => {
        console.log(res);
        this.hotelComment = res.data;
        this.total = this.hotelComment.total;
        this.nextStart1 = res.data.nextStart;
        this.hotelLocation = res.data.data;
      });
      this.parameter = parameter;

      return value;
    },
    gethotel(value) {
      console.log(value);
      this.cityId = value;
      this.$axios({
        url: `/hotels?city=${this.cityId}`,
      }).then((res) => {
        console.log(res);
        this.hotelComment = res.data;
        this.hotelLocation = res.data.data;
        // console.log(this.hotelLocation);
        this.total = this.hotelComment.total;
        this.nextStart = res.data.nextStart;
      });
    },
    //点击上一页
    previous(value) {
      console.log(value);
      this.hotelComment = [];
      if (this.hotelInfo()) {
        //如果用户没有筛选条件,定义一个页码去保留当前用户选择的页码
        let start = this.nextStart1 * value - this.nextStart1;
        this.$axios({
          url: `/hotels?${this.parameter}&_start=${start}`,
        }).then((res) => {
          console.log(res);
          this.hotelComment = res.data;
          this.total = this.hotelComment.total;
          this.hotelLocation = res.data.data;
        });
      } //当searchId为0时证明用户没有搜索城市
      else if (this.searchId == 0) {
        // console.log(this.nextStart * value - this.nextStart);
        this.$axios({
          url: "/hotels",
          params: {
            city: this.cityId,
            _start: this.nextStart * value - this.nextStart,
          },
        }).then((res) => {
          console.log(res);
          this.hotelComment = res.data;
          this.total = this.hotelComment.total;
          this.hotelLocation = res.data.data;
        });
      } else if (this.searchId > 0) {
        this.$axios({
          url: "/hotels",
          params: {
            city: this.searchId,
            _start: this.nextStart * value - this.nextStart,
          },
        }).then((res) => {
          console.log(res);
          this.hotelComment = res.data;
          this.total = this.hotelComment.total;
          this.hotelLocation = res.data.data;
        });
      }
    },
    //点击下一页
    next(value) {
      // console.log(value);
      // console.log(this.hotelInfo());
      this.hotelComment = [];
      if (this.hotelInfo()) {
        let start1 = this.nextStart1 * value - this.nextStart1;
        this.$axios({
          url: `/hotels?${this.parameter}&_start=${start}`,
        }).then((res) => {
          console.log(res);
          this.hotelComment = res.data;
          this.total = this.hotelComment.total;
          this.hotelLocation = res.data.data;
        });
      } else if (this.searchId == 0) {
        console.log(this.nextStart * value - this.nextStart);
        this.$axios({
          url: "/hotels",
          params: {
            city: this.cityId,
            _start: this.nextStart * value - this.nextStart,
          },
        }).then((res) => {
          console.log(res);
          this.hotelComment = res.data;
          this.total = this.hotelComment.total;
          this.hotelLocation = res.data.data;
        });
      } else if (this.searchId > 0) {
        this.$axios({
          url: "/hotels",
          params: {
            city: this.searchId,
            _start: this.nextStart * value - this.nextStart,
          },
        }).then((res) => {
          console.log(res);
          this.hotelComment = res.data;
          this.total = this.hotelComment.total;
          this.hotelLocation = res.data.data;
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.hotel {
  width: 1000px;
  margin: 0 auto;
  .fenye {
    display: flex;
    justify-content: flex-end;
  }
  .noresult {
    width: 1000px;
    text-align: center;
  }
}
</style>